<template>
  <div class="photowall">
    <div
      class="photowallList"
      v-for="(i, index) in resultArray"
      :key="index"
      :class="{ second: issecond(index + 1) }"
    >
      <transition-group :name="transition(index + 1)" appear>
        <div
          class="imgbox"
          v-for="(j, index1) in i"
          :key="index1"
          v-show="isshow(index, index1)"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="j.name"
            :placement="placement(index + 1)"
          >
            <el-image
              class="el-img"
              alt=""
              :src="j.photo1"
              :preview-src-list="filterData(j)"  
            >
            </el-image>
          </el-tooltip>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "photowall",
  data() {
    return {
      isshows: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ],
    };
  },
  mounted() {
    this.beginshow();
  },
  methods: {
    beginshow() {
      const order = [6, 8, 5, 9, 4, 10, 3, 11, 2, 14, 1, 13, 0, 12];
      setTimeout(() => {
        for (let i in order) {
          ((time) => {
            setTimeout(() => {
              this.$set(this.isshows, order[i], true);
            }, 200 * time);
          })(i);
        }
      }, 2200);
    }
  },
  computed: {
    ...mapState({
      photoData: (state) => state.gundamwalldata.gundamwall.data,
    }),
    Array1() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(0, 3);
      return array;
    },
    Array2() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(3, 2);
      return array;
    },
    Array3() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(5, 2);
      return array;
    },
    Array4() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(7, 1);
      return array;
    },
    Array5() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(8, 2);
      return array;
    },
    Array6() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(10, 2);
      return array;
    },
    Array7() {
      let array = [];
      Object.assign(array, this.photoData);
      array = array.splice(12, 3);
      return array;
    },
    resultArray() {
      let array = [];
      array.push(this.Array1);
      array.push(this.Array2);
      array.push(this.Array3);
      array.push(this.Array4);
      array.push(this.Array5);
      array.push(this.Array6);
      array.push(this.Array7);
      return array;
    },
    issecond(index) {
      return (index) => {
        return index % 2 == 0 ? true : false;
      };
    },
    placement(index) {
      return (index) => {
        if (index <= 3) {
          return "top-end";
        } else if (index == 4) {
          return "top";
        } else {
          return "top-start";
        }
      };
    },
    transition(index) {
      return (index) => {
        if (index == 4) {
          return "first";
        } else {
          return "";
        }
      };
    },
    isshow(index, index1) {
      const _this = this;
      return (index, index1) => {
        switch (index) {
          case 0:
            return _this.isshows[index1];
          case 1:
            return _this.isshows[3 + index1];
          case 2:
            return _this.isshows[5 + index1];
          case 3:
            return _this.isshows[7 + index1];
          case 4:
            return _this.isshows[8 + index1];
          case 5:
            return _this.isshows[10 + index1];
          case 6:
            return _this.isshows[12 + index1];
        }
      };
    },
    filterData(data){
      return (data)=>{
        let dataArr=[];
        for(let i in data){
          if(i!="name"){
            if(data[i]!=null){
              dataArr.push(data[i])
            }
          }
        }
        return dataArr;
      }
    }
  },
};
</script>

<style scoped>
.photowall {
  width: 1400px;
  height: 600px;
  position: absolute;
  margin-top: calc(calc(100vh - 670px) / 2);
  display: flex;
}
.photowallList {
  width: 14.2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.imgbox {
  width: 100%;
  height: 120px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 1px rgb(53 72 91 / 14%), 0 3px 2px rgb(0 0 0 / 4%),
    0 7px 5px rgb(0 0 0 / 2%), 0 13px 10px rgb(0 0 0 / 2%),
    0 22px 17px rgb(0 0 0 / 2%) !important;
  margin-bottom: 120px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.imgbox img {
  max-width: 100%;
  overflow: hidden;
}
.photowall .imgbox:last-child {
  margin-bottom: 0%;
}
.second .imgbox:last-child {
  margin-bottom: 120px;
}
.imgbox:hover {
  box-shadow: 0 0 0 1px rgba(53, 72, 91, 0.24), 0 3px 2px rgba(0, 0, 0, 0.14),
    0 7px 5px rgba(0, 0, 0, 0.12), 0 13px 10px rgba(0, 0, 0, 0.12),
    0 22px 17px rgba(0, 0, 0, 0.12) !important;
}

.first-enter-active {
  transition: all 0.4s ease;
  transition-delay: 1.7s;
}

.first-leave-active {
  transition: all 0.4s ease;
}

.first-enter,
.first-leave-to {
  transform: translatey(50px);
  opacity: 0;
}
</style>